<template>
  <div class="operation pageOut">
    <el-tabs v-model="activeName" style="border: 1px solid #f3f5f9">
      <el-tab-pane label="操作记录" name="first">
        <div class="operation">
          <div class="operation_top">
            <el-form
              class="demo-ruleForm"
              :inline="true"
              style="margin-top: 20px"
            >
              <el-form-item label="操作端:" prop="operationPort">
                <el-select
                  v-model="deviceListQuery.operationPort"
                  placeholder="请输入操作端"
                  @change="getoperationSel"
                  clearable
                  filterable
                >
                  <el-option label="总后台端" value="0"></el-option>
                  <el-option label="操作端" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作人:" prop="username">
                <el-input
                  placeholder="请输入操作人"
                  v-model="deviceListQuery.username"
                  clearable
                  @change="getoperationSel"
                ></el-input>
              </el-form-item>
              <el-form-item label="角色:" prop="role">
                <el-select
                  v-model="deviceListQuery.role"
                  placeholder="请选择"
                  clearable
                  @change="getoperationSel"
                >
                  <el-option
                    v-for="(item, index) in roleOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作时间:" prop="data">
                <el-date-picker
                  v-model="value1"
                  class="work_date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTime"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getoperationSel"
                  >确认搜索</el-button
                >
                <el-button
                  style="color: #fff; background: rgb(160, 72, 255)"
                  @click="handlerNum"
                  >批量导出</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-table
            ref="multipleTable"
            :data="perationSelList"
            tooltip-effect="dark"
            border
            style="margin-top: 20px"
            :header-cell-style="{ background: '#f5f5f6', color: '#9EA0A5' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="no" label="序号"> </el-table-column>
            <el-table-column label="操作端">
              <template slot-scope="scoped">
                <div>
                  <span v-if="scoped.row.operationPort == 0">总后台端</span>
                  <span v-else>操作端</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="operationPage" label="操作页面" width="150">
              <template slot-scope="scoped">
                <div>
                  <span
                    v-if="scoped.row.operationPage == null"
                    style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.operationPage }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="operationButton"
              label="操作按钮"
              width="150"
            >
              <template slot-scope="scoped">
                <div>
                  <span
                    v-if="scoped.row.operationButton == null"
                    style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.operationButton }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="operContent" label="操作内容" width="250">
              <template slot-scope="scoped">
                <div>
                  <span v-if="scoped.row.operContent == null" style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.operContent }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="操作人" width="150">
              <template slot-scope="scoped">
                <div>
                  <span v-if="scoped.row.realName == null" style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.realName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="operIp" label="IP" width="150">
              <template slot-scope="scoped">
                <div>
                  <span v-if="scoped.row.operIp == null" style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.operIp }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="oper_date"
              label="操作时间"
              width="300px "
              fixed="right"
            >
              <template slot-scope="scoped">
                <div>
                  <span v-if="scoped.row.oper_date == null" style="color: red"
                    >暂无数据</span
                  >
                  <span v-else>{{ scoped.row.oper_date }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination" style="margin-bottom: 20px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="deviceListQuery.pageSize"
              :current-page="deviceListQuery.pageNumber"
              layout="total, sizes, prev, pager, next, jumper"
              :total="devicetotal"
              class="management_page"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  operationSel,
  operationOut,
  roleList,
  operationUserSel
} from "../../utils/api";
import { Excel } from "../../utils/common";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      operationForm: {
        name: "",
        data: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      //   分页
      deviceListQuery: {
        type: 1,
        pageSize: 10,
        pageNumber: 1,
        companyId: "",
        username: "",
        operationPort: "",
        role: "",
        startTime: "",
        endTime: ""
      },
      devicetotal: 0,
      recordId: [],
      perationSelList: [],
      value1: "",
      // 操作记录的操作人的数据
      recordRen: [],
      // 操作记录的操作人的角色
      roleOptions: []
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.deviceListQuery.pageNumber = 1;
      this.getoperationSel();
      this.getRloeList();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getoperationSel();
        this.getRloeList();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.deviceListQuery.pageSize = val;
      this.getoperationSel();
    },
    handleCurrentChange(val) {
      this.deviceListQuery.pageNumber = val;
      this.getoperationSel();
    },
    // 操作记录查询
    getoperationSel() {
      this.deviceListQuery.companyId = this.org_id;
      this.postRequest(operationSel, this.deviceListQuery).then(res => {
        if (res.code == 200) {
          this.perationSelList = res.data.data;
          this.devicetotal = res.data.count;
        }
      });
    },
    // 批量选择
    handleSelectionChange(val) {
      this.recordId = val.map(v => v.id);
    },
    // 批量导出
    handlerNum() {
      if (this.recordId == "") {
        return this.$message.error("请选择导出的序号");
      }
      const params = {
        id: this.recordId.join(",")
      };
      Excel(operationOut, params, "操作记录", "GET");
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.deviceListQuery.startTime = "";
        this.deviceListQuery.endTime = "";
        this.getoperationSel();
      } else {
        this.deviceListQuery.startTime = value[0];
        this.deviceListQuery.endTime = value[1];
        this.getoperationSel();
      }
    },
    // 操作端查询
    handlerPort(val) {
      const params = {
        pageSize: this.deviceListQuery.pageSize,
        pageNumber: this.deviceListQuery.pageNumber,
        operationPort: val,
        companyId: this.org_id
      };
      this.postRequest(operationSel, params).then(res => {
        if (res.code == 200) {
          this.perationSelList = res.data.data;
          this.devicetotal = res.data.count;
        }
      });
    },
    getRloeList() {
      this.postRequest(roleList).then(res => {
        if (res.code === 200) {
          this.roleOptions = res.data;
        }
      });
    }
    // getoperationUserSel() {
    //   this.postRequest(operationUserSel).then(res => {
    //     if (res.code === 200) {
    //       this.recordRen = res.data;
    //     }
    //   });
    // }
  },
  created() {
    // this.getoperationSel();
    // this.getRloeList();
    // this.getoperationUserSel();
    this.getDataInit();
  }
};
</script>
<style lang="less">
.operation {
  padding: 20px;
  .operation_top {
    border: 1px solid #f3f5f9;
  }
}
.el-tabs__nav-scroll {
  overflow: hidden;
  display: flex;
  justify-content: center;
  justify-items: center;
  padding: 30px;
}
.el-tabs__item {
  font-size: 18px;
  font-family: "Microsoft YaHei";
}
</style>
